<template>
	<view>

		<!-- #ifdef ：      if defined  仅在某个平台编译
		#ifndef ：     if not defined  在除里该平台的其他编译
		#endif ：      end if 结束条件编译 -->
		<view class="corse-play">
			<!-- 原生子窗体 就是只针对APP端 -->
			<!-- #ifndef APP-PLUS -->
			<video id="myVideo" style="width:750rpx;height:495rpx;" :src="src" :poster="poster">
			</video>
			<!-- #endif -->



			<!-- space-between两端对齐 -->
			<!-- 标题与详情按钮 -->
			<view class="space-between course-info">
				<text class="title">{{course.title}}</text>
				<view class="right" @click="navTo(`/pages/course/course-detail?id=${id}`,{login:true})">
					<text>详情</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<!-- 课程列表 -->

			<course-dir :isBuy="true" :chapterList="chapterList" :activeObj="activeObj" @playVideo="changeVideo">
			</course-dir>

			<!-- 底部按钮 分享按钮只针对APP端有效果  评论三端都有 -->
			<view class="bottom center">
				<!-- #ifdef APP-PLUS -->
				<view class="btn-item one  column" @click="share">
					<text class="iconfont icon-Share-Outline"></text>
					<text>分享</text>
				</view>
				<!-- #endif -->

				<view class="btn-item one column" @click="openComment">
					<text class="iconfont icon-Share-Outline"></text>
					<text>评论</text>
				</view>
			</view>


			<!-- 分享组件 -->
			<mxg-share ref="share" :shareData="course"></mxg-share>


			<!-- 公共组件 -->
			<mxg-comment ref="comment" @submitComment="submitComment"></mxg-comment>


		</view>
	</view>
</template>

<script>
	let videoContext = null
	//章节的组件复用
	import courseDir from './components/course-dir.vue'
	//api
	import api from '@/api/course.js'
	export default {
		components: {
			courseDir
		},
		data() {
			return {
				activeObj: { //列表选中的下标
					chapterIndex: 0, //章的下标
					sectionIndex: 0 //节的下标
				},
				id: null,
				course: {}, //课程基本信息
				chapterList: [], //课程视频列表
				src: '', //视频路径
				poster: '', //视频主图
			}
		},
		onReady(res) {
			// MP-ALIPAY 除了支付宝小程序  都可使用这个方式
			// #ifndef MP-ALIPAY
			//获取实例id = myVideo
			videoContext = uni.createVideoContext('myVideo', this)
			// #endif
		},
		onLoad(option) {
			//跳转过来得id
			this.id = option.id
			//一进来就加载数据
			this.loadData()
		},
		methods: {
			async loadData() {
				//查询课程基本信息
				// {data:course}  取了一个别名赋值
				const {
					data: course
				} = await api.getCourseById(this.id)
				this.course = course

				//查询视频播放列表
				const {
					data: chapterList
				} = await api.getCourseBuyList(this.id)
				this.chapterList = chapterList
				// console.log(this.chapterList,'chapterList')

				//#ifndef APP-PLUS
				// 非APP端
				this.poster = this.course.mainImage //主图赋值

				const chapter = this.chapterList[this.activeObj.chapterIndex] //下标
				const sctiong = chapter && chapter.sectionList[this.activeObj.sectionIndex]
				//条件逻辑两条件要同时满足  不然就走的或  空字符 ''
				this.src = sctiong && sctiong.videoUrl || ''
				console.log(sctiong.videoUrl, 'sctiong.videoUrl')
				//#endif

				// #ifdef APP-PLUS
				// 针对APP端, 触发video事件，传递数据
				uni.$emit('video', {
					type: 'init',
					params: {
						course: this.course, // 课程信息
						chapterList: this.chapterList, // 课程列表
						activeObj: this.activeObj
					}
				})
				// #endif

			},

			//Dir组件事件section就是OBJ  //切换播放
			changeVideo(obj) {
				console.log(JSON.stringify(obj), 'obj')
				this.activeObj = obj.activeObj
				console.log('改变后的下表', JSON.stringify(this.activeObj))

				//点击的那节课信息 obj.section   非APP端
				//	#ifndef APP-PLUS  
				videoContext.pause() //先暂停
				this.src = obj.section.videoUrl //在把点击哪个的src 赋值给他
				setTimeout(() => { //这里给他一个缓冲
					videoContext.play() //播放
				}, 300)
				//	#endif

				//APP端
				//#ifdef  APP-PLUS
				uni.$emit('video', {
					type: 'change',
					params: {
						activeObj: obj.activeObj,
						section: obj.section
					}
				})
				//#endif
				console.log('this.course', this.course)
			},

			//触发分享按钮调用子组件的方法
			share() {
				//#ifdef APP-PLUS
				//给组件一个实例进行一个你子组件的调用  
				this.$refs.share.showHandler()
				//#endif
			},

			// 提交评论内容
			async submitComment(comment) {
				console.log(JSON.stringify(comment), 'comment')
				uni.showLoading({ //加载中 
					title: '提交中',
					mask: true //这是遮层 操作不了
				})

				//封装课程id
				comment.courseId = this.id
				//调用接口提交
				const res = await api.addCourseComment(comment)
				uni.hideLoading() //关闭加载中  严谨 ->注意
				if (res.code === 20000) {
					comment.content = '' //提交后清空
					this.$util.msg('评论成功')
					//隐藏评论框
					this.$refs.comment.show()
				} else {
					this.$util.msg(res.message)
				}
				
					
					
			},
			//打开评论窗口
			openComment() {
				this.$refs.comment.show()
			}
		}
	}
</script>

<style lang="scss">
	.corse-play {
		padding-bottom: 100rpx;
	}

	.course-info {
		padding: 30rpx;
		font-weight: bold;
		border-bottom: $xg-underline;

		title {
			width: 500rpx;
			font-size: 35rpx;
			line-height: 60rpx;
			color: #1d1d1f;
		}

		.right>text {
			/*  >text 针对他每一个text 进行一个设置*/
			font-size: 28rpx;
			line-height: 60rpx;
			color: $xg-text-color-black;
		}
	}

	.bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		background-color: #FFFFFF;
		border-top: $xg-underline;
	}

	.btn-item {
		text {
			text-align: center;
			color: #959da5;
			font-size: 25rpx;
		}

		.iconfont {
			font-size: 38rpx;
		}
	}
</style>
